<template>
	<view class="strategyAdd">
		<!-- 我的攻略-新增攻略页面 -->
		<u--form labelPosition="left" :model="strategy" :rules="rules" ref="uForm">
			<u-form-item label="攻略标题" prop="title" borderBottom labelWidth='90'>
				<u--input v-model="strategy.title" border="none" placeholder="请输入"></u--input>
			</u-form-item>
			<u-form-item label="攻略内容" prop="content" borderBottom labelWidth='90'>
				<u--textarea v-model="strategy.content" border="none" placeholder="请输入"></u--textarea>
			</u-form-item>
			<u-form-item label="关联" prop="detailsId" borderBottom labelWidth='90'>
				<view style="display: flex;align-items: center;justify-content: space-between;" @click="isShow">
					<u--input v-model="detailsId" disabledColor="#ffffff" disabled border="none"
						placeholder="请选择"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</view>
			</u-form-item>
			<u-form-item label="图片" borderBottom labelWidth='90' prop="photo">
				<div style="display: flex;width: 100%;flex-wrap: wrap;align-items: center;gap: 20rpx;">
					<u--image :showLoading="true" :src="item" width="80px" height="80px"
						v-for="(item,index) in strategy.photo" :key="index" @click="delImg(item)"></u--image>
					<u-icon name="photo" @click="clickImg()" size="28"></u-icon>
				</div>
			</u-form-item>
		</u--form>
		<view class="submitDiv">
			<u-button type="primary" @click="submit">提交</u-button>
		</view>
		<u-picker :show="show" :columns="columns" keyName="title" @confirm='confirmPicker'
			@cancel="cancelPicker"></u-picker>
	</view>
</template>

<script>
	import {
		deletePhoto,
		strategyAdd,
		scenicAreaAndHotelAndFood,
		strategyById,
		strategyUpdate
	} from '@/api/userCenter.js'
	export default {
		data() {
			return {
				isAdd: false,
				BASE_URL: 'http://192.168.10.122:8081',//刘
				// BASE_URL: 'http://192.168.10.243:8081', //张
				detailsId: '',
				strategy: {
					photo: [],
					title: '',
					content: '',
					detailsId: [],
					id: ''
				},
				rules: {
					'title': {
						type: 'string',
						required: true,
						message: '请输入',
						trigger: ['blur', 'change']
					},
					'content': {
						type: 'string',
						required: true,
						message: '请输入',
						trigger: ['blur', 'change']
					},
					'detailsId': {
						type: 'array',
						required: true,
						message: '请选择',
						trigger: ['blur', 'change']
					},
					'photo': {
						type: 'array',
						required: true,
						message: '请选择',
						trigger: ['blur', 'change']
					},
				},
				show: false,
				columns: []
			};
		},
		onLoad(e) {
			if (e.id) {
				this.getDetails(e.id)
				this.isAdd = false
			} else {
				this.isAdd = true
			}
			// this.getdetailsIdList()
		},
		methods: {
			async getDetails(id) {
				let par = {
					id: id,
					type: '4',
					lon: null,
					lat: null
				}
				let res = await strategyById(par)
				if (res.code == 200) {
					this.strategy.photo = res.data.photo;
					this.strategy.title = res.data.title;
					this.strategy.content = res.data.content;
					this.strategy.detailsId = res.data.labelID;
					this.strategy.id = res.data.id;
					this.detailsId = res.data.label.join(",")
				};
			},
			// 下拉框点击关闭
			cancelPicker() {
				this.show = false
			},
			// 下拉框点击确认
			confirmPicker(e) {
				this.strategy.detailsId.push(e.value[0].id)
				this.detailsId = e.value[0].title
				this.show = false
			},
			// 获取关联列表
			async getdetailsIdList() {
				this.columns = []
				let res = await scenicAreaAndHotelAndFood()
				if (res.code == 200) {
					this.columns = [
						[res.data[0], res.data[1], res.data[2], res.data[3], res.data[4], res.data[5]]
					]
				}
			},
			// 点击
			isShow() {
				uni.navigateTo({
					url: '/pages/strategyAdd/association'
				})
			},
			// 确认
			submit() {
				this.$refs.uForm.validate().then(res => {
					if (this.isAdd) {
						strategyAdd(this.strategy).then(res => {
							if (res.code == 200) {
								wx.showToast({
									title: res.msg,
									icon: 'success',
									duration: 1000
								})
								setTimeout(() => {
									uni.navigateBack()
								}, 1000)
							}
						})
					} else {
						strategyUpdate(this.strategy).then(res => {
							if (res.code == 200) {
								wx.showToast({
									title: res.msg,
									icon: 'success',
									duration: 1000
								})
								setTimeout(() => {
									uni.navigateBack()
								}, 1000)
							}
						})
					}

				}).catch(errors => {
					console.log(this.strategy, errors);
					uni.$u.toast('请全部输入')
				})
			},
			// 上传图片
			clickImg() {
				let newStr = null
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: `${this.BASE_URL}/commonUtil/addPhoto`, //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'Content-Type': 'multipart/form-data',
								'Authorization': wx.getStorageSync('userInfo').token,
								'satoken': wx.getStorageSync('userInfo').token
							},
							success: (res) => {
								let resData = JSON.parse(res.data)
								if (resData.code == 200) {
									this.strategy.photo.push(resData.data)
								}
							}
						});
					}
				});
			},
			// 删除图片
			delImg(str) {
				console.log(str, 99);
				let filename = str.split('/').pop(); // 提取文件名部分
				deletePhoto({
					filename
				}).then(response => {
					let newArr = this.strategy.photo.filter(res => {
						return res != str
					})
					this.strategy.photo = newArr
				})
			},
		}
	}
</script>

<style lang="scss">
	.strategyAdd {
		padding: 30rpx;
	}
</style>